<!-- 模板复制弹窗-->
<template>
  <a-modal
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    title-align="center"
    unmount-on-close
    :body-style="{
      maxHeight: '500px'
    }"
  >
    <template #title> 引用模板库 </template>
    <div class="header" style="margin-bottom: 20px">
      <div class="header-front">
        <a-space>
          <a-input-search
            :style="{ width: '220px' }"
            placeholder="模板名称"
            search-button
            @search="onSearch"
            @press-enter="onSearch"
            v-model="nameSearch"
          />
        </a-space>
      </div>
    </div>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column align="center" :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="150"
        title="模板名称"
        dataIndex="name"
      >
      </a-table-column>
      <!-- <a-table-column
        align="center"
        :width="150"
        title="组织节点"
        dataIndex="typeId"
      >
        <template #cell>
          {{ name }}
        </template>
      </a-table-column> -->
      <a-table-column
        align="center"
        :width="300"
        title="描述"
        dataIndex="remark"
      >
      </a-table-column>
    </TableTurn>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { Message } from '@arco-design/web-vue';
import { GetDepartmentTemplate } from '@/apis/management/organization/baseSetting/organizationalType/index';
import { GetPositionTemplate } from '@/apis/management/organization/baseSetting/PositionSystem';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    type: 1 | 2; // 类型 1 组织 2 职位
    node?: 1 | 2 | 3; //只有组织模板才有 1 公司 2 部门 3 门店
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'referenceEmit']);

let tableRef = ref();
const selectedList = computed(() => tableRef.value?.selectedList);
const selectedListData = computed(() => tableRef.value?.selectedListData);
// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

let nameSearch = ref(''); // 姓名搜索框
const getTableData = async (pageData?: any) => {
  try {
    let res;
    // 组织模板
    if (props.type === 1) {
      res = await GetDepartmentTemplate({
        ...pageData,
        name: nameSearch.value,
        ownerType: 3,
        node: props.node
      });
    }
    // 职位模板
    else {
      res = await GetPositionTemplate({
        ...pageData,
        name: nameSearch.value,
        ownerType: 4
      });
    }
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// watch(
//   () => props.visible,
//   (newVal: boolean) => {}
// );

const onSearch = () => {
  refresh();
};
const refresh = () => {
  tableRef.value.loadData();
};

const handleOk = async () => {
  if (selectedList.value.length === 0) {
    Message.error('请至少选择一项');
    return;
  }
  emits('referenceEmit', selectedList.value, selectedListData.value);
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
